<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>SWU Student Restaurant</title>
    <meta content="" name="description">
    <meta content="" name="keywords">
    <link href="../assets/img/favicon.png" rel="icon">
    <link href="../assets/img/apple-touch-icon.png" rel="apple-touch-icon">
    <link href="../assets/vendor/animate.css/animate.min.css" rel="stylesheet">
    <link href="../assets/vendor/aos/aos.css" rel="stylesheet">
    <link href="../assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="../assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
    <link href="../assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
    <link href="../assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
    <link href="../assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
    <link href="../assets/css/style.css" rel="stylesheet">
</head>
<style>
.addfood .form-basic {
  width: 100%;
}
.addfood .form-basic .form-group {
  padding-bottom: 8px;
}
.addfood .form-basic .validate {
  display: none;
  color: red;
  margin: 0 0 15px 0;
  font-weight: 400;
  font-size: 13px;
}

.addfood .form-basic input, .addfood .form-basic textarea,.addfood .form-basic select {
  border-radius: 0;
  box-shadow: none;
  font-size: 14px;
  background: #0c0b09;
  border-color: #625b4b;
  color: white;
}
.addfood .form-basic input::-moz-placeholder, .addfood .form-basic textarea::-moz-placeholder,.addfood .form-basic select::-moz-placeholder {
  color: #a49b89;
}
.addfood .form-basic input::placeholder, .addfood .form-basic textarea::placeholder,.addfood .form-basic select::placeholder {
  color: #a49b89;
}
.addfood .form-basic input:focus, .addfood .form-basic textarea:focus ,.addfood .form-basic select:focus {
  border-color: #cda45e;
}
.addfood .form-basic input,.addfood .form-basic select {
  height: 44px;
}
.addfood .form-basic textarea {
  padding: 10px 12px;
}
.addfood .form-basic button[type=submit] {
  background: #cda45e;
  border: 0;
  padding: 10px 35px;
  color: #fff;
  transition: 0.4s;
  border-radius: 50px;
}
.addfood .form-basic button[type=submit]:hover {
  background: #d3af71;
}
</style>

<body>

<div id="topbar" class="d-flex align-items-center fixed-top">
    <div class="container d-flex justify-content-center justify-content-md-between">
        <div class="contact-info d-flex align-items-center">
            <i class="bi bi-phone d-flex align-items-center"><span>18622332179@163.com</span></i>
            <i class="bi bi-clock d-flex align-items-center ms-4"><span>2021/12/22</span></i>
        </div>
    </div>
</div>

<header id="header" class="fixed-top d-flex align-items-cente">
    <div class="container-fluid container-xl d-flex align-items-center justify-content-lg-between">

        <h1 class="logo me-auto me-lg-0">西南大学美食推荐系统</h1>
    </div>
</header>

<main id="main">
    <section class="breadcrumbs">
        <div class="container">
            <div class="d-flex justify-content-between align-items-center">
                <h2>美食分享</h2>
                <ol>
                    <li><a href="./main.jsp">返回</a></li>
                </ol>
            </div>

        </div>
    </section>

    <!-- =======添加食物======= -->
    <section id="addfood" class="addfood">
        <div class="container" data-aos="fade-up">
            <div class="section-title">
                <p>添加你喜欢的美食！</p>
            </div>
            <form action="./addfood" method="post" enctype="multipart/form-data" class="form-basic" data-aos="fade-up" data-aos-delay="100">
                <div class="row">
                    <div class="col-lg-4 col-md-6 form-group">
                        <input type="text" name="name" class="form-control" id="name" placeholder="食物名称">
                        <div class="validate"></div>
                    </div>
                    <div class="col-lg-4 col-md-6 form-group mt-3 mt-md-0">
                        <input type="text" class="form-control" name="located" id="located" placeholder="地点">
                        <div class="validate"></div>
                    </div>
                    <div class="col-lg-4 col-md-6 form-group mt-3 mt-md-0">
                        <input type="text" class="form-control" name="price" id="price" placeholder="价格">
                        <div class="validate"></div>
                    </div>
                    <div class="col-lg-4 col-md-6 form-group mt-3">
                        <select name="type" class="form-control" id="type" style="color: #a49b89;">
                            <option value='mian' style="color: white;">面食
                            <option value='rice' style="color: white;">米饭
                            <option value='bbq' style="color: white;">烧烤
                            <option value='zizhu' style="color: white;">自助
                            <option value="other" style="color: white;">其他
                        </select>
                        <div class="validate"></div>
                    </div>
                    <div class="col-lg-4 col-md-6 form-group mt-3">
                        <input type="file" class="form-control" name="pics" id="pics" placeholder="图片">
                        <div class="validate"></div>
                    </div>
                </div>
                <div class="form-group mt-3">
                    <textarea class="form-control" name="reason" rows="5" placeholder="推荐原因"></textarea>
                    <div class="validate"></div>
                </div>
                <div class="text-center"><button type="submit">添加</button></div>
            </form>
        </div>
    </section>
</main>

<footer id="footer">
    <div class="container">
        <div class="credits">
            Made by 李博钊
        </div>
        <div class="credits">
            Template reference to <a href="https://bootstrapmade.com/">BootstrapMade</a>
        </div>
    </div>
</footer>

<div id="preloader"></div>
<a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>
<script src="../assets/vendor/aos/aos.js"></script>
<script src="../assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="../assets/vendor/glightbox/js/glightbox.min.js"></script>
<script src="../assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
<script src="../assets/vendor/swiper/swiper-bundle.min.js"></script>
<script src="../assets/js/main.js"></script>

</body>
</html>